<html>
  <head>
    <title>用户编辑</title>
    <meta charset="UTF-8">
    <style>
       *{
         margin: 0;
         padding: 0;
       }
       body{
        font-family: "微软雅黑";
       }
      .logo{
        padding-bottom: 20px;
        border-bottom: 1px solid #f4f4f4;
      }
      .left {
        height: 100%;
        border-right:1px solid #cccccc;
        width:192px;
        float: left;
        text-align: center;
        padding-top: 20px;
      }

      .lul li {
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 16px;
        
      }
      
      .lul li:hover {
        background-color: #eef1f6;
      }

      .left li a{
        text-decoration: none;
        color: #48576a;
      }
        /*右侧样式*/
       .right {
         width: 85%;
         float: left;
       }
      /*header*/
       .header{
         width: 100%;

         background-color: #4f5d80;
         color: white;
       }
      .hul li {

        height:50px;
        line-height: 50px;
        text-align: center;
        display: inline-block;
      }


      /*面包屑样式*/
      .mbx {
        background-color: white;
        padding-left: 10px;
        padding-top: 20px;
      }
      .mbx a {
        text-decoration: none;
      }



      .container {
        width: 100%;
        padding-left: 20%;
        padding-top:2% ;
      }

       form .row{
         height: 80px;
         line-height: 80px;

       }

      form label{
        display: inline-block;
        text-align: right;
        width: 150px;
        border-bottom: dashed 1px #4f5d80;
      }

       input,select {
        height: 40px;
        width: 300px;
        margin-left: 50px;
         border-radius: 5px;
         border: 1px solid #bbbbbb;
         outline:none;
        transition: border 1s, box-shadow 1s; //过渡显示获取焦点 边框

      }
      input {
        padding:0 5px ;
         outline:none;
        transition: border 1s, box-shadow 1s; //过渡显示获取焦点 边框
      }
  
   .row input:focus{
        border:1px solid #06c;
        -moz-box-shadow:0 0 10px #06c;
      -webkit-box-shadow:0 0 10px #06c;
      box-shadow:0 0 10px #06c;
      }

       .btn_row {
         padding-left: 10%;
         margin: 20px;
         height: 80px;

       }

      /*添加按钮*/
       .add_btn {
         padding: 10px 20px;
         margin: 5px 0;
         cursor: pointer;
         background-color: cornflowerblue;
         color: #FFF;
         display: inline-block;
         text-decoration: none;
         font-size: 16px;
         border-radius: 3px;
         outline: none;
         border: none;
       }
    </style>



  </head>
  <body >

        <div class="left">
          <div class="logo">
            <img src="../../images/logo.44fc79c.png" width="100px">
          </div>
           <ul class="lul">
                <li>
               <a href="../index.html">首页</a>
              
             </li>
             <li>
              <a href="list.html">用户管理</a>
             </li>
           </ul>
        </div>
        <div class="right">
             <div class="header">

               <ul class="hul">
                 <li style="width: 50%">您好，${userName}！
                   现在是2017年6月5日 星期五 14:50
                 </li>
                 <li style="text-align: right;width:45% ">
                   退出
                 </li>
               </ul>

             </div>

            <div class="main">
                <div class="mbx">
                  <a href="javascript:void(0)">首页</a>  >>  <a href="javascript:void(0)">用户管理</a> >> <a href="javascript:void(0)">添加用户</a>
                </div>

              <div class="container">


                <div>

                  <form action="" method="post">
                    <input type="hidden" name="method" value="save">
                    <div class="row">
                      <label for="">姓名</label>
                      <input type="text" name="realName">
                    </div>
                    <div class="row">
                      <label for="">用户名</label>
                      <input type="text" name="userName">
                    </div>
                    <div class="row">
                      <label for="">工号</label>
                      <input type="text" name="no">
                    </div>
                    <div class="row">
                      <label for="">身份证号</label>
                      <input type="text" name="idNo">
                    </div>
                    <div class="row">
                    <label for="">性别</label>
                      <select name="sex" id="sex">
                        <option value="男">男</option>
                        <option value="女">女</option>
                      </select>
                    </div>
                    <div class="row">
                      <label for="">角色</label>
                      <select name="role" >
                        <option value="管理员">管理员</option>
                        <option value="员工">员工</option>
                      </select>
                    </div>
                       <div class="btn_row" >
                               <a href="#" class="add_btn">返回</a>
                                    &nbsp;&nbsp;
                              <button type="submit" class="add_btn">保存</button>
                         </div>
                  </form>
                </div>
              </div>

            </div>
        </div>
  </body>
</html>